<template>

    <el-dialog title="出入账详情" :visible.sync="visible" width="95%" :close-on-click-modal="false">


      <d2-crud
        ref="d2Crud"
        :options="mainTable.options"
        :index-row="mainTable.indexRow"
        :columns="mainTable.columns"
        :data="mainTable.list"
        :selection-row="mainTable.allowSelect"
        :loading="mainTable.loading"
      ></d2-crud>

      <div slot="footer" class="dialog-footer">

        <!-- <el-popover
          v-if="id != null"
          placement="top"
          width="160"
          v-model="popDeleteVisible">
          <p>确定删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="default" @click="popDeleteVisible = false">取消</el-button>
            <el-button type="danger" size="mini" @click="submitDel">确定</el-button>
          </div>
          <el-button type="danger" slot="reference"  size="small" style="float: left;" :loading="loading">删 除</el-button>
        </el-popover> -->

        <el-button @click="close" size="mini">关 闭</el-button>
        <!-- <el-button @click="submit" size="mini" type="primary" :loading="loading">提 交</el-button> -->
      </div>
    </el-dialog>

</template>

<script>

import ApiMain from '@/api/settle.accountAccess';
import dayjs from "dayjs";

export default {
  mixins: [
  ],
  props: [
    'accountTypeOptions',
    'eventTypeOptions',
    'statusOptions',
  ],
  data () {
    return {

      visible   : false,
      popDeleteVisible: false,
      loading         : false,

      mainQueryRaw: null,
      mainQuery: {
        accountType : '',
        type        : '',
        amount     : '',
        createRemark: '',
      },

      mainTable: {
        loading: false,
        options: {
          border             : true,
          stripe             : true,
          highlightCurrentRow: true,
          emptyText          : '暂无数据',
          size               : 'mini',
        },
        indexRow: {
          title:'序号',
          width: "80",
          align:'center'
        },
        indexRow: null,
        allowSelect: false,
        columns: [
          {title: '商户号', key: 'mchNo', align: 'center', showOverflowTooltip: true},
          // {title: '终端号', key: 'terNo', align: 'center', showOverflowTooltip: true},
          {title: '流水号', key: 'serialNo', align: 'center', width: 180, showOverflowTooltip: true},
          {title: '账户类型', key: 'strAccountType', align: 'center', showOverflowTooltip: true, width: 180,},
          {title: '出入帐类型', key: 'strAccessType', align: 'center', showOverflowTooltip: true},
          {title: '金额', key: 'floatAmount', align: 'right', showOverflowTooltip: true, formatter: (col, row, val, index) => {
            return val.toFixed(2);

          }},
          {title: '余额', key: 'floatAfterTotalAmount', align: 'right', showOverflowTooltip: true, formatter: (col, row, val, index) => {
            return val.toFixed(2);
          }},
          {title: '币种', key: 'currency', align: 'left', showOverflowTooltip: true,},
          {title: '说明', key: 'remark', align: 'left', showOverflowTooltip: true, minWidth: 360,},
          {title: '出入帐时间', key: 'createTime', align: 'center', showOverflowTooltip: true, width: 180, formatter: (col, row, val, index) => {
            return dayjs(val).format("YYYY-MM-DD HH:mm:ss")
          }},
        ],
        list: [],
        pagination: {
          currentPage: 1,
          pageSize   : 50,
          total      : 0,
          pageSizes  : [50, 100, 200]
        },
        current: null,
      },

      id  : null,
      data: null,
    }
  },
  mounted () {
    this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {

    show (data) {

      this.visible = true;

      this.data = data;

      console.log(Object.copy(data));

      this.fetchMainData();

    },

    close () {
      this.visible = false;
      this.$emit('dialog-close');
    },

    reset () {
      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.$refs['main-form'] && this.$refs['main-form'].resetFields();
      this.id   = null;
      this.data = null;
    },

    buildMainQuery () {

      var query = {
        page  : 1,
        limit : 999999,
        search: {
          accessId: this.data.id,
        },
      };

      console.log(query);

      return query;
    },

    async fetchMainData () {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) {}


      this.mainTable.loading = false;

    },

    renderMainData (re) {

      re.list.forEach(item => {

        item.floatAmount            = item.amount / 100;
        item.floatBeforeTotalAmount = item.beforeTotalAmount / 100;
        item.floatAfterTotalAmount  = item.afterTotalAmount / 100;

        // item.strAccountType = util.tool.strFromOptions(item.accountType, this.accountTypeOptions, '-');
        // item.strType        = util.tool.strFromOptions(item.type, this.typeOptions, '-');

      });

      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;
      this.loading = true;


      try {

        var req = Object.copy(this.mainQuery);

        req.mchId = this.data.mchId;
        req.mchNo = this.data.mchNo;
        req.terId = this.data.terId;
        req.terNo = this.data.terNo;

        req.amount = req.amount * 100;

        await ApiMain.add(req);
        this.$message({message: '操作成功', type: 'success'});
        this.close();
      } catch (err) { console.error(err); }

      this.loading = false;

    },

  }
}
</script>

<style>

</style>
